<template>
  <div class='cont'>
    <div class='cont-left'>
      <div class='cont-header'>
        <span>元数据更新情况</span>
        <span class='endtime'>截止2016-05-02 18:00:00</span>
      </div>
      <chart :options="barLeft" ref="bar" theme="ovilia-green" auto-resize style='width:100%;height:100%'></chart>
    </div>
    <div class='cont-right'>
      <div class='cont-header'>
        <span>主数据注册统计（月）</span>
        <span style='float:right;color:#009ce3;font-size:12px;margin-left:20px'>更多</span>
        <span class='endtime'>截止2016-05-02 18:00:00</span>
      </div>
      <chart :options="barRight" ref="bar" theme="ovilia-green" auto-resize style='width:100%;height:100%'></chart>
    </div>
  </div>
</template>

<script>
  import getBarRight from './data/dataGoverBarRight'
  import getBarLeft from './data/dataGoverBarLeft'
  export default {
    data() {
      return {
        barRight: getBarRight(),
        barLeft: getBarLeft()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .cont {
    .cont-left {
      width: calc(50% - 10px);
      float: left;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      height: 300px;
      padding-top: 44px;
      position: relative;
    }
    .cont-right {
      margin-left: calc(50% + 10px);
      padding-top: 44px;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      height: 300px;
      position: relative;
    }
    .cont-header {
      position: absolute;
      width: 100%;
      padding: 0 20px;
      top: 0;
      left: 0;
      height: 44px;
      line-height: 44px;
      border-bottom: 1px solid #ebeef5;
      font-size: 14px;
      .endtime {
        float: right;
        color: #999;
        font-size: 12px
      }
    }
  }
</style>